<template>

    <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix header">
            <span>{{mealInfo.day}}{{mealInfo.mealName}}</span>
            <el-tag v-if="mealInfo.state===1"
                    effect="dark"
                    size="small"
                    class="state"
                    type="success">
                已预订
            </el-tag>
            <el-tag v-else
                    effect="dark"
                    size="small"
                    class="state"
                    type="danger">
                未预定
            </el-tag>
            <el-tag v-if="isOver"
                    effect="dark"
                    size="small"
                    class="state"
                    type="info">
                已结束
            </el-tag>

            <el-link
                    v-if="!isOver"
                    type="primary"
                    @click="helpOther"
                    class="order-other">
                帮人代点
            </el-link>

            <el-dialog
                    title="提示"
                    :visible.sync="dialogVisible"
                    width="310px"
                    top="20vh"
                    @open="startHelpOrder"
            >
                <el-table
                        :data="tableData"
                        :show-header="false"
                        max-height="280px"
                        style="width: 100%">
                    <el-table-column
                            label="姓名"
                            width="80">
                        <template slot-scope="scope">
                            {{ scope.row.name }}
                            <!--                            <el-tag size="small"></el-tag>-->
                        </template>

                    </el-table-column>
                    <el-table-column>
                        <template slot-scope="scope">
                            <el-tag size="small" effect="dark" type="success" v-if="scope.row.state===1">已预订</el-tag>
                            <el-tag size="small" effect="dark" type="danger" v-else>未预定</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="70">
                        <template slot-scope="scope">
                            <el-button
                                    v-if="scope.row.state!==1"
                                    size="mini"
                                    type="primary"
                                    plain
                                    @click="helpOrder(scope.$index, scope.row)">代点
                            </el-button>
                            <el-button
                                    v-else
                                    size="mini"
                                    type="danger"
                                    plain
                                    @click="helpDisOrder(scope.$index, scope.row)">取消
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="postHelpOrder">确 定</el-button>
                 </span>
            </el-dialog>

        </div>
        <div class="content">
            <div class="info">
                {{departmentOrderResult}}
                <el-popover v-if="mealInfo.departmentOrderNum"
                            placement="right-start"
                            title="点餐名单"
                            width="200"
                            trigger="hover">
                    <div class="name-list">
                        <el-tag
                                v-for="(name,index) of mealInfo.orderNames"
                                :key="index"
                                type="success">
                            {{name}}
                        </el-tag>
                    </div>
                    <el-link type="primary" class="detail" slot="reference">详情</el-link>
                </el-popover>
                <div class="whole-num">
                    {{wholeOrderResult}}
                </div>
            </div>
            <div v-if="!isOver">
                <el-button

                        :disabled="mealInfo.state===1"
                        type="primary"
                        :plain="mealInfo.state!==1"
                        @click="doOrder">
                    预定{{mealInfo.mealName}}
                </el-button>
                <el-button
                        class="second-button"

                        :disabled="mealInfo.state===2"
                        type="danger"
                        :plain="mealInfo.state!==2"
                        @click="cancelOrder">
                    不吃{{mealInfo.mealName}}
                </el-button>
            </div>
        </div>
    </el-card>

</template>

<script lang="ts">
    import {Component, Prop, Vue} from 'vue-property-decorator';
    import MealInfo from "@/common/MealInfo"
    import axios from "axios"
    import utils from "@/common/Utils"
    import HelpOrderUserState from "@/common/HelpOrderUserState"

    @Component
    export default class MainPanel extends Vue {

        @Prop() mealInfo!: MealInfo

        @Prop() isOver!: boolean

        dialogVisible = false

        tableData: HelpOrderUserState[] = []

        helpOrderList: HelpOrderUserState[] = []


        doOrder() {
            this.changeOrderState(1)
        }

        cancelOrder() {
            this.changeOrderState(2)
        }

        changeOrderState(state: number) {
            this.$emit('order-change', this.mealInfo.whichMeal, state)
        }


        get departmentOrderResult() {
            return this.$store.state.userInfo.department
                + this.mealInfo.day
                + this.mealInfo.mealName
                + " : "
                + this.mealInfo.departmentOrderNum
                + "人"
        }


        get wholeOrderResult() {
            return '科技中心'
                + this.mealInfo.day
                + this.mealInfo.mealName
                + " : "
                + this.mealInfo.wholeOrderNum
                + "人"
        }


        startHelpOrder() {
            axios.get(
                utils.getFullURL('/meal/' + this.$store.state.userInfo.id + "/" + this.mealInfo.whichMeal + "/_departmentState")
            ).then((resp) => {
                //console.log('get today order success')
                this.setHelpUserTable(resp.data as HelpOrderUserState[]);

            }).catch(reson => {
                //console.log(reson.response.data)
                this.$message.error('系统错误，请刷新重试或联系管理员。。。   错误原因：' + reson.response.data.message);
            })
        }

        setHelpUserTable(list: HelpOrderUserState[]) {
            this.tableData = list;
        }

        helpOther() {
            this.dialogVisible = true
        }

        helpOrder(index: number, row: HelpOrderUserState) {
            row.state = 1
            row.helperId = this.$store.state.userInfo.id
        }

        helpDisOrder(index: number, row: HelpOrderUserState) {

            this.$confirm(`确认取消“${row.name}”的${this.mealInfo.day}${this.mealInfo.mealName}订单?`,
                '警告',

                {
                    customClass: "cancel-order",
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                row.state = 2
                row.helperId = this.$store.state.userInfo.id
            })
        }

        postHelpOrder() {


            const changeList: HelpOrderUserState[] = []
            this.tableData.forEach(data => {
                if (data.helperId === this.$store.state.userInfo.id) {
                    changeList.push(data)
                }
            })

            axios.post(
                utils.getFullURL('/meal/' + this.mealInfo.whichMeal),
                changeList
            ).then(() => {
                //console.log('save success')
                this.dialogVisible = false
                this.$emit('help-order-ok')
            }).catch(reson => {
                //console.log(reson.response.data)
                this.$message.error('系统错误，请刷新重试或联系管理员。。。   错误原因：' + reson.response.data.message);
            })
        }


    }
</script>

<style scoped lang="scss">

    .box-card {
        width: 100%;
        height: 220px;
        margin: 20px auto;

        .header {
            .state {
                margin-left: 10px;
            }

            .order-other {
                float: right;
            }
        }

        .content {
            padding: 0 20px;

            .info {
                line-height: 20px;
                margin-bottom: 30px;

                .detail {
                    margin-left: 10px;
                }

                .whole-num {
                    margin-top: 8px;
                }

            }

            .second-button {
                float: right;
            }
        }
    }

    .name-list {
        span {
            margin: 0 10px 10px 0;
        }
    }


</style>

<style lang="scss">
    .cancel-order {
        max-width: 310px;
    }
</style>